<template>
    <div>
        <div class="search content-box">
            <h6 class="title-h6">{{name}}操作记录查询</h6>
            <el-form :inline="true" :model="searchFrom" class="demo-form-inline" label-position="right" label-width="150px" style="padding-top:20px;text-align:left;padding-left:50px;">
                <el-form-item label="生效状态">
                    <el-select v-model="searchFrom.status" placeholder="请选择生效状态">
                    <el-option label="已生效" value="1"></el-option>
                    <el-option label="待生效" value="0"></el-option>
                    <el-option label="已失效" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="search-time">
                  <el-button-group>
                    <el-button :class="defaultActive?'active':' '" @click="setDefault()">本周</el-button>
                    <el-button :class="!defaultActive?'active':' '" @click="chooseTime()">自定义</el-button>
                  </el-button-group>
                </el-form-item>
                <el-form-item v-show="!defaultActive">
                    <el-date-picker
                    v-model="searchFrom.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content-box">
            <h6 class="title-h6">{{name}}操作记录列表</h6>
            <div style="padding:20px">
              <el-table
                :data="tableData"
                style="width: 100%;text-align:center" border>
                <el-table-column
                label="操作人"
                width="180" prop="name" align="center">
                </el-table-column>
                <el-table-column
                label="操作时间"
                width="180" prop="time" align="center">
                </el-table-column>
                <el-table-column label="变更值" width="300" align="center">
                    <template slot-scope="scope">
                        <p v-for="(item) in scope.row.operation" :key="item.name"><span>{{item.name}}：</span><span>{{item.value}}</span></p>
                    </template>
                </el-table-column>
                <el-table-column label="生效状态"
                width="180" prop="status" align="center"></el-table-column>
                <el-table-column label=" 生效时间"
                width="180" prop="operatTime" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                <template slot-scope="scope" >
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status === '未生效'">置为失效</el-button>
                    <span v-else>无</span>
                </template>
                </el-table-column>
            </el-table>
            </div>
            <div style="padding-top:20px;padding-bottom:20px;">
                <el-pagination
                @size-change="handleSizeChange" background
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name:'OperationRecord',
  data() {
      return {
          searchFrom: {
              status: '',
              time: 7,
          },
          tableData:[
            {
              name: 'xxxx',
              time: '2018-03-05 02:02:02',
              operation:[{name: '客户公司名称', value: 'xxxx'},{name:'签约公司', value: '云动'}],
              status: '未生效',
              operatTime: '2018-05-05 02:02:00'
            },{
              name: 'xxxx',
              time: '2018-03-05 02:02:02',
              operation:[{name: '客户公司名称', value: 'xxxx'},{name:'签约公司', value: '云动'}],
              status: '已生效',
              operatTime: '2018-05-05 02:02:00'
            }
            ],
          defaultActive: true,
          name: '爱奇艺',
          currentPage4: 1
      }
  },
  methods: {
      chooseTime() {
        this.defaultActive = false;
        if(this.searchFrom.time == 7) {
            this.searchFrom.time = ''
        }
        
      },
      setDefault() {
        this.defaultActive = true;
        this.searchFrom.time = 7
      },
      search() {
          console.log(this.searchFrom)
      },
      handleEdit(index, row) {

      },
      handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    },
  }
}
</script>

<style lang="scss">
  .search {
      .search-time {
          .active {
              color: #fff;
            background-color: #67c23a;
            border-color: #67c23a;
          }
      }
  }
</style>

